<template>
	<view class="stationDetails">
		<view class="model-box waterfall-box flex-box">
			<image mode="widthFix" class="waterfall-item" v-for="(item,index) in infor.imgs" :key="index"
				 :src="item" @tap="browse(item,index)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				infor:{}
			};
		},
		onLoad(options) {
			this.id = options.id
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})	
			uni.setNavigationBarTitle({
				title: this.infor.title
			})	
			this.getData()
		},
		methods:{
			browse(e,index) {
				var imglist = [];
				this.infor.imgs.forEach((item, index) => {
					imglist.push(item);
				})
			
				uni.previewImage({
					current: index,
					urls: imglist
				})
			},
			getData(){
				this.$u.api.storeDetail({id:this.id}).then(res => {
					if (res.status) {
						console.log(res)
						this.infor = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.stationDetails{
		padding:30rpx;
	}
.waterfall-box{
	justify-content:space-between;
	flex-wrap: wrap;
	.waterfall-item{
		width:330rpx;
		height:330rpx;
		// width: 100%;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
	}
}
</style>
